<template>
  <div class="bridge-main" v-loading="isLoading">
    <!-- v-loading="isLoading" -->
    <div class="choose">
      <el-select
        v-model="bridge"
        filterable
        placeholder="请选择桥梁"
        style="width: 87%"
        @change="setWaterwayListVal"
      >
        <el-option
          v-for="item in WaterwayListData"
          :key="item.name"
          :label="item.name"
          :value="item.name"
        />
      </el-select>
      <div class="cascade-option" @click="show2 = true">
        <img
          src="../../../static/images/bridgeAreaControl/icon_kuanjia.png"
          alt=""
        />
      </div>
      <van-popup v-model:show="show2" round position="bottom">
        <van-cascader
          v-model="cascaderValue2"
          title="请选择桥梁"
          :options="options2"
          @close="show2 = false"
          @change="onChange2"
          @finish="onFinish2"
        />
      </van-popup>
    </div>
    <div class="bridge-main-content">
      <div class="bridge-img">
        <OlArc ref="OlArcRef"></OlArc>
      </div>
      <div class="bridge-info">
        <div
          class="bridge-info-item"
          :style="!showItemShowBox ? 'overflow: hidden;' : 'overflow: visible;'"
        >
          <div class="item-head">
            <div class="head-title">航道名称</div>
            <div
              class="head-icon"
              @click="showItemMainFalse(), (showItemShowBox = true)"
            >
              <img
                src="../../../static/images/bridgeAreaControl/icon_show.png"
                alt=""
              />
            </div>
          </div>
          <div class="item-empty" v-if="!waterwayBaseInfoData.channelName">
            暂无数据
          </div>
          <div class="item-swqk" v-else>
            <div class="swqk-name margintop8">
              {{ waterwayBaseInfoData.channelName || "--" }}
            </div>
            <div class="swqk-value">
              {{ waterwayBaseInfoData.cWeihudj || "--"
              }}<span class="unit">级</span>
            </div>
            <div class="swqk-total">
              <div class="total-left">航标总数</div>
              <div class="total-right">
                {{ waterwayBaseInfoData.hbNum?.toString() || "--" }}
              </div>
            </div>
          </div>
          <div class="bridge-info-item-showBox" v-if="showItemShowBox">
            <div class="item-head">
              <div class="head-title">基本信息</div>
              <div class="head-icon" @click="showItemShowBox = false">
                <img
                  src="../../../static/images/bridgeAreaControl/icon_hidden.png"
                  alt=""
                />
              </div>
            </div>
            <div class="item-couplet">
              <div class="item-couplet-ITEM">
                <div class="ITEM-left">所在航道名称</div>
                <div class="ITEM-right">
                  {{ waterwayBaseInfoData.channelName || "--" }}
                </div>
              </div>
              <div class="item-couplet-ITEM">
                <div class="ITEM-left">距离航道起点里程</div>
                <div class="ITEM-right">
                  {{ waterwayBaseInfoData.hdMile || "--" }}公里
                </div>
              </div>
              <div class="item-couplet-ITEM">
                <div class="ITEM-left">航道管养单位</div>
                <div class="ITEM-right">
                  {{ waterwayBaseInfoData.bmPname || "--" }}
                </div>
              </div>
              <div class="item-couplet-ITEM">
                <div class="ITEM-left">航道发展规划技术等级</div>
                <div class="ITEM-right">
                  {{ waterwayBaseInfoData.jishuLvl || "--" }}
                </div>
              </div>
              <div class="item-couplet-ITEM">
                <div class="ITEM-left">航道现状技术等级</div>
                <div class="ITEM-right">
                  {{ waterwayBaseInfoData.cWeihudj || "--" }}级
                </div>
              </div>
              <div class="item-couplet-ITEM">
                <div class="ITEM-left">航道维护类别</div>
                <div class="ITEM-right">
                  {{ waterwayBaseInfoData.weihulb || "--" }}
                </div>
              </div>
              <div class="item-couplet-ITEM">
                <div class="ITEM-left">航标总数</div>
                <div class="ITEM-right">
                  {{ waterwayBaseInfoData.hbNum?.toString() || "--" }}
                </div>
              </div>
              <!-- <div class="item-couplet-ITEM">
                <div class="ITEM-left">设标里程</div>
                <div class="ITEM-right">
                  {{ waterwayBaseInfoData.shebiaoMile || "--" }}公里
                </div>
              </div> -->
              <div class="item-couplet-ITEM">
                <div class="ITEM-left">航标配布类型</div>
                <div class="ITEM-right">
                  {{ waterwayBaseInfoData.hangbiaopeibuType || "--" }}
                </div>
              </div>
              <!-- <div class="item-couplet-ITEM">
                <div class="ITEM-left">水文站数量</div>
                <div class="ITEM-right">
                  {{ waterwayBaseInfoData.waterwayStation || "--" }}个
                </div>
              </div> -->
            </div>
          </div>
        </div>
        <div
          class="bridge-info-item"
          :style="
            !showItemShowBox2 ? 'overflow: hidden;' : 'overflow: visible;'
          "
        >
          <div class="item-head">
            <div class="head-title">维护情况</div>
          </div>
          <div class="item-couplet">
            <div class="item-couplet-ITEM">
              <div class="ITEM-left">维护水深</div>
              <div class="ITEM-right">
                {{ waterwayBaseInfoData.weihuDeep || "--" }}
                <span class="unit">m</span>
              </div>
            </div>
            <div class="item-couplet-ITEM">
              <div class="ITEM-left">维护宽度</div>
              <div class="ITEM-right">
                {{ waterwayBaseInfoData.weihuWeigth || "--" }}
                <span class="unit">m</span>
              </div>
            </div>
            <div class="item-couplet-ITEM">
              <div class="ITEM-left">维护弯曲半径</div>
              <div class="ITEM-right">
                {{ waterwayBaseInfoData.wanquRadius || "--" }}
                <span class="unit">m</span>
              </div>
            </div>
          </div>
          <div
            class="bridge-info-item-showBox"
            style="left: calc(-100% - 10px)"
            v-if="showItemShowBox2"
          >
            <div class="item-head">
              <div class="head-title">开平大桥2</div>
              <div class="head-icon" @click="showItemShowBox2 = false">
                <img
                  src="../../../static/images/bridgeAreaControl/icon_hidden.png"
                  alt=""
                />
              </div>
            </div>
          </div>
        </div>
        <div class="bridge-info-item">
          <div class="item-head">
            <div class="head-title">水位情况</div>
            <div class="head-more" v-if="NewWaterData.point" @click="clickswqk">
              更多
              <img
                src="../../../static/images/bridgeAreaControl/icon_more.png"
                alt=""
              />
            </div>
          </div>
          <div class="item-empty" v-if="!NewWaterData.point">暂无数据</div>
          <div class="item-swqk" v-else>
            <div class="swqk-value margintop16">
              {{ NewWaterData.swz || "--" }}<span class="unit">m</span>
              <span class="swqk-ss">实时</span>
            </div>
            <div class="swqk-name margintop8">
              {{ NewWaterData.point || "--" }}
            </div>
          </div>
        </div>
        <div
          class="bridge-info-item"
          :style="
            !showItemShowBox3 ? 'overflow: hidden;' : 'overflow: visible;'
          "
        >
          <div class="item-head">
            <div class="head-title">巡检情况</div>
            <div class="head-more" v-if="channelInspectionData.xcMile" @click="clickXjqk">
              更多
              <img
                src="../../../static/images/bridgeAreaControl/icon_more.png"
                alt=""
              />
            </div>
          </div>
          <div class="item-empty" v-if="!channelInspectionData.xcMile">
            暂无数据
          </div>
          <div class="item-swqk" v-else>
            <div class="swqk-name">巡检里程数</div>
            <div class="swqk-value">
              {{ channelInspectionData.xcMile || "--"
              }}<span class="unit">公里</span>
            </div>
          </div>
        </div>
        <div class="bridge-info-item">
          <div class="item-head">
            <div class="head-title">船舶流量</div>
            <div class="head-more" v-if="hdCbllData[0]?.name" @click="clickcbll">
              更多
              <img
                src="../../../static/images/bridgeAreaControl/icon_more.png"
                alt=""
              />
            </div>
          </div>
          <div class="item-empty" v-if="!hdCbllData[0]?.name">暂无数据</div>
          <div class="item-cdll" v-else>
            <div class="cdll-title">{{ hdCbllData[0]?.name || "--" }}</div>
            <div class="cdll-item">
              <div class="cdll-item-left">3000吨以上船舶</div>
              <div class="cdll-item-right">
                {{ hdCbllData[0]?.dayu || "--" }}
              </div>
            </div>
            <div class="cdll-item">
              <div class="cdll-item-left">3000吨以下船舶</div>
              <div class="cdll-item-right">
                {{ hdCbllData[0]?.xiaoyu || "--" }}
              </div>
            </div>
          </div>
        </div>
        <div class="bridge-info-item">
          <div class="item-head">
            <div class="head-title">关联桥梁</div>
            <div
              class="head-more"
              v-if="!associationBgData?.num == '0'"
              @click="clickGlql"
            >
              更多
              <img
                src="../../../static/images/bridgeAreaControl/icon_more.png"
                alt=""
              />
            </div>
          </div>
          <div class="item-empty" v-if="associationBgData?.num == '0'">
            暂无数据
          </div>
          <div class="item-glql" v-else>
            <div class="glql-lfet">
              {{ associationBgData?.num?.toString() || "0" }}<span>座</span>
            </div>
            <div class="glql-right">
              <div class="glql-right-box">
                <div class="right1" v-if="associationBgData?.bgName[0]">
                  {{ associationBgData.bgName[0] }}
                </div>
                <div class="right2" v-if="associationBgData?.bgName[1]">
                  {{ associationBgData.bgName[1] }}
                </div>
                <div class="right3" v-if="associationBgData?.bgName[3]">
                  {{ associationBgData.bgName[2] }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="bridge-list-container">
        <div class="bridge-list">
          <div class="item-head">
            <div class="head-title">航道通告</div>
            <!-- <div class="head-more">
              更多
              <img
                src="../../../static/images/bridgeAreaControl/icon_more.png"
                alt=""
              />
            </div> -->
          </div>
          <div class="Empty" v-if="waterwayNoticeData.length == 0">
            暂无数据
          </div>
          <div class="item-hdtg-info">
            <div
              class="hdtg-info-ITEM"
              v-for="(item, index) in waterwayNoticeData"
              :key="index"
            >
              <div class="ITEM-name">
                {{ item.title || "--" }}
              </div>
              <div class="ITEM-time">
                <div class="time-left">来源:{{ item.source || "--" }}</div>
                <div class="time-right">发布时间:{{ item.time || "--" }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from "vue";
import { useRouter } from "vue-router";
import {
  getWaterwayList,
  waterwayBaseInfo,
  getNewWater,
  channelInspection,
  hdCbll,
  associationBg,
  waterwayNotice,
  getWaterPoint,
  getBgHd,
  getBmCenter,
  getBridgeList,
} from "../../../utils/bridgeAreaControlApi";
import { closeToast, showLoadingToast, showToast } from "vant";
import OlArc from "../component/channel_map.vue";
const router = useRouter();
const showItemShowBox = ref(false);
const showItemShowBox2 = ref(false);
const showItemShowBox3 = ref(false);
const isLoading = ref(false);
const loadingNum = ref(0);
const show2 = ref(false);
const cascaderValue2 = ref("");
const options2 = ref([]);
const onChange2 = ({ value, tabIndex, selectedOptions }) => {
  let { index } = selectedOptions[0];
  if (tabIndex == "0") {
    // showLoadingToast("加载中...");
    // getBgHd({ bmpName: value }).then((res) => {
    //   if (res.data.length == "0") {
    //     setTimeout(() => {
    //       showToast("当前选项找不到数据");
    //     }, 500);
    //   }
    //   let children = res.data?.map((ele) => {
    //     return {
    //       text: ele.hangdao,
    //       value: ele.hangdao,
    //     };
    //   });
    //   console.log(children);
    //   options2.value[index].children = children || [];
    // })
    // .finally(() => {
    //   closeToast();
    // });
    getBridgeList({ bmpName: value }).then((res) => {
      if (res.data.length == "0") {
        setTimeout(() => {
          showToast("当前选项找不到数据");
        }, 500);
      }
      let children = res.data?.map((ele) => {
        return {
          text: ele.name,
          value: ele.name,
        };
      });
      options2.value[index].children = children || [];
    })
    .finally(() => {
      closeToast();
    });
  }
};
const clickXjqk = () => {
  router.push({
    path: "/channel_xjqk",
    query: { waterway: WaterwayListValue.value },
  });
};
const onFinish2 = ({ selectedOptions }) => {
  show2.value = false;
  bridge.value = selectedOptions[1].value;
  WaterwayListData.value.forEach((item) => {
    if(selectedOptions[1].value == item.name){
      WaterwayListValue.value = item.hangdao;
      getData();
    }
  });
  // WaterwayListValue.value = selectedOptions[1].value;
  // getData();
};
const clickcbll = () => {
  router.push({
    path: "/channel_cbll",
    query: { waterway: WaterwayListValue.value },
  });
};
const clickswqk = () => {
  router.push({
    path: "/bridge_swqk",
    // query: { bridge: NewWaterData.value.point, type: "channel" },
    query: { bridge: WaterwayListValue.value, type: "channel" },
  });
};
// loading
const showLoading = () => {
  isLoading.value = true;
  loadingNum.value++;
};
const hiddenLoading = () => {
  loadingNum.value--;
  if (loadingNum.value === 0) {
    isLoading.value = false;
    loadingNum.value = 0;
  }
};
const clickGlql = () => {
  router.push({
    path: "/channel_glql",
    query: { Waterway: WaterwayListValue.value },
  });
};
const bridge = ref("");
const WaterwayListValue = ref("");
const setWaterwayListVal = (val) => {
  bridge.value = val;
  WaterwayListData.value.forEach((item) => {
    if(val == item.name){
      WaterwayListValue.value = item.hangdao;
      getData();
    }
  });
  // WaterwayListValue.value = val;
  // cascaderValue2.value = "";
  // getData();
};
const showItemMainFalse = () => {
  showItemShowBox.value = false;
  showItemShowBox2.value = false;
  showItemShowBox3.value = false;
};
const WaterwayListData = ref([]);
const getWaterwayListDataFn = () => {
  return new Promise((resolve, reject) => {
    // getWaterwayList().then((res) => {
    //   if (res.code === 200 && res.data.length) {
    //     resolve(res.data);
    //   }
    // });
    getBridgeList().then((res) => {
      if (res.code === 200 && res.data.length) {
        resolve(res.data);
      }
    });
  });
};
const getBmCenterDataFn = (data) => {
  return new Promise((resolve, reject) => {
    getBmCenter(data)
      .then((res) => {
        if (res.code === 200 && res.data.length) {
          options2.value = res.data.map((ele, index) => {
            return {
              text: ele.name,
              value: ele.name,
              index: index,
              children: [],
            };
          });
        }
      })
      .finally(() => {
        resolve();
      });
  });
};
const waterwayBaseInfoData = ref({});
const getwaterwayBaseInfoDataFn = () => {
  showLoading();
  waterwayBaseInfo({
    bridge: bridge.value,
    waterway: WaterwayListValue.value,
  })
    .then((res) => {
      if (res.code === 200 && res.data) {
        waterwayBaseInfoData.value = res.data;
      }
    })
    .finally(() => {
      hiddenLoading();
    });
};
const NewWaterData = ref({});
const getNewWaterDataFn = async () => {
  showLoading();
  let WaterPoint = await getWaterPoint({
    waterway: WaterwayListValue.value,
  });
  if (!WaterPoint.data[0]?.point) {
    hiddenLoading();
    return;
  }
  getNewWater({
    waterway: WaterPoint.data[0]?.point,
  })
    .then((res) => {
      if (res.code === 200 && res.data.length) {
        NewWaterData.value = res.data[0];
      }
    })
    .finally(() => {
      hiddenLoading();
    });
};
const channelInspectionData = ref({});
const getchannelInspectionDataFn = () => {
  showLoading();
  channelInspection({
    waterway: WaterwayListValue.value,
  })
    .then((res) => {
      if (res.code === 200) {
        channelInspectionData.value = res.data;
      }
    })
    .finally(() => {
      hiddenLoading();
    });
};
const hdCbllData = ref([]);
const gethdCbllDataFn = () => {
  showLoading();
  hdCbll({
    waterway: WaterwayListValue.value,
  })
    .then((res) => {
      if (res.code === 200 && res.data) {
        hdCbllData.value = res.data;
      }
    })
    .finally(() => {
      hiddenLoading();
    });
};
const associationBgData = ref({
  bgName: [],
});
const getassociationBgDataFn = () => {
  showLoading();
  associationBg({
    waterway: WaterwayListValue.value,
  })
    .then((res) => {
      if (res.code === 200 && res.data) {
        associationBgData.value = res.data;
      }
    })
    .finally(() => {
      hiddenLoading();
    });
};
const waterwayNoticeData = ref([]);
const getwaterwayNoticeDataFn = () => {
  showLoading();
  waterwayNotice({
    waterway: WaterwayListValue.value,
  })
    .then((res) => {
      if (res.code === 200 && res.data) {
        waterwayNoticeData.value = res.data;
      }
    })
    .finally(() => {
      hiddenLoading();
    });
};
const getData = async () => {
  getwaterwayBaseInfoDataFn();
  getNewWaterDataFn();
  getchannelInspectionDataFn();
  gethdCbllDataFn();
  getassociationBgDataFn();
  getwaterwayNoticeDataFn();
};
onMounted(async () => {
  isLoading.value = true;
  WaterwayListData.value = await getWaterwayListDataFn();
  await getBmCenterDataFn();
  bridge.value = "北斗大桥";
  WaterwayListValue.value = "沙湾水道";
  getData();
});
</script>

<style lang="scss" scoped>
::v-deep.el-select-dropdown__item {
  width: calc(100vw - 40px);
}
.bridge-main {
  position: relative;
  height: 100%;
  .bridge-main-content {
    height: calc(100% - 50px);
    overflow-y: scroll;
    padding: 16px 20px;
    box-sizing: border-box;
  }
}
.choose {
  width: 100%;
  height: 50px;
  background: #ffffff;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
  // border: 1px solid #d9d9d9;
  text-align: center;
  line-height: 50px;
  position: relative;
  padding: 0 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .cascade-option {
    width: 12%;
    height: 37px;
    // background-color: #96bcf4;
    img {
      width: 100%;
      height: 100%;
      padding-top: 2px;
    }
  }
  .option {
    width: 100%;
    height: 100%;
    .choose-input {
      width: 94%;
      height: 30px;
      border: none;
      border: 1px solid #dee1e6;
      text-align: center;
    }
    .choose-list {
      position: absolute;
      font-size: 12px;
      font-weight: 400;
      color: #595959;
      display: flex;
      justify-content: center;
      width: 124px;
      background: #fff;
      z-index: 999;
      width: 100%;
      .list {
        width: 94%;
        height: 130px;
        overflow-y: scroll;
        margin-top: -2px;
        border: 1px solid #d9d9d9;
        li {
          line-height: 35px;
          list-style-type: none;
        }
      }
    }
  }
}
.bridge-img {
  width: 100%;
  height: 208px;
  border-radius: 8px 8px 8px 8px;
  background-color: #fff;
  box-sizing: border-box;
  overflow: hidden;
  img {
    width: 100%;
    height: 100%;
  }
}
.bridge-info {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  .bridge-info-item {
    overflow: hidden;
    width: calc(50% - 5px);
    margin-top: 16px;
    box-sizing: border-box;
    position: relative;
    // overflow: hidden;
    height: 130px;
    background: #ffffff;
    border-radius: 8px 8px 8px 8px;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.08);
    .item-head {
      display: flex;
      justify-content: space-between;
      position: relative;
      background: rgba(22, 93, 255, 0.05);
      height: 36px;
      color: #262626;
      padding: 0 8px;
      align-items: center;
      border-bottom: 1px solid #e6e6e6;
      .head-title {
        font-size: 14px;
      }
      .head-icon {
        width: 16px;
        height: 16px;
        // position: absolute;
        // right: 8px;
        // top: 0;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .head-more {
        display: flex;
        align-items: center;
        color: #abadb1;
        font-size: 12px;
        img {
          width: 4px;
          height: 6px;
          margin-left: 4px;
        }
      }
    }
    .item-cdll {
      padding: 0 8px;
      box-sizing: border-box;
      .cdll-title {
        margin-top: 8px;
        color: #266fe8;
        font-size: 14px;
        line-height: 20px;
      }

      .cdll-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 5px;
        .cdll-item-left {
          font-size: 12px;
          color: rgba(0, 0, 0, 0.45);
        }

        .cdll-item-right {
          font-weight: bold;
          color: #165dff;
          font-size: 16px;
        }
      }
    }
    .item-glql {
      padding: 0 8px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      .glql-lfet {
        margin-top: 25px;
        font-size: 32px;
        font-weight: bold;
        color: #165dff;
        line-height: 40px;
        span {
          font-size: 14px;
          color: #b1b1b1;
          font-weight: normal;
        }
      }

      .glql-right {
        text-align: center;
        font-size: 14px;

        .glql-right-box {
          height: 85px;
          display: flex;
          flex-direction: column;
          justify-content: center;
        }
        .right1 {
          margin-top: 8px;
          line-height: 20px;
          font-weight: 500;
          color: #8c8c8c;
          overflow: hidden;
          width: 80px;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        .right2 {
          margin-top: 8px;
          padding: 2px 4px;
          font-size: 14px;
          color: #595959;
          background-color: #e8efff;
          border: 1px solid #bcd1ff;
          border-radius: 8px 8px 8px 8px;
          overflow: hidden;
          width: 80px;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        .right3 {
          margin-top: 8px;
          font-weight: 500;
          color: #bfbfbf;
          line-height: 20px;
          overflow: hidden;
          width: 80px;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }
    .item-sshd {
      padding: 0 8px;
      box-sizing: border-box;
      .title {
        color: #595959;
        font-size: 24px;
        line-height: 36px;
        margin-top: 16px;
        font-weight: 800;
        text-align: center;
      }
      .city {
        margin-top: 14px;
        color: rgba(0, 0, 0, 0.45);
        line-height: 24px;
        text-align: right;
      }
    }
    .item-swqk {
      padding: 0 8px;
      box-sizing: border-box;
      text-align: center;
      .swqk-name {
        font-weight: 400;
        margin-top: 16px;
        color: #8c8c8c;
        height: 20px;
        font-size: 14px;
      }
      .swqk-value {
        margin-top: 8px;
        color: #266fe8;
        font-size: 24px;
        .unit {
          color: #a4a4a4;
          font-size: 20px;
        }
        .swqk-ss {
          margin-left: 4px;
          background: rgba(78, 217, 160, 0.1);
          border-radius: 4px 4px 4px 4px;
          padding: 2px 3px;
          opacity: 1;
          font-size: 12px;
          color: #4ed9a0;
        }
      }
      .swqk-total {
        margin-top: 7px;
        display: flex;
        font-size: 12px;
        align-items: center;
        justify-content: space-between;
        .total-left {
          color: rgba(0, 0, 0, 0.45);
        }

        .total-right {
          color: #595959;
        }
      }
    }
    .item-cbmd {
      padding: 0 8px;
      box-sizing: border-box;
      text-align: center;
      .title {
        color: rgba(0, 0, 0, 0.45);
        font-size: 14px;
        line-height: 19px;
        font-weight: 400;
        margin-top: 16px;
      }
      .value {
        margin-top: 4px;
        color: #266fe8;
        line-height: 24px;
        font-size: 24px;
        font-weight: bold;
      }
    }
    .item-chart {
      margin-top: 5px;
      height: 75px;
      width: 100%;
      //   margin: 10px 0;
    }
    .item-couplet {
      padding: 0 8px;
      box-sizing: border-box;
      .item-couplet-ITEM {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 30px;
        color: rgba(0, 0, 0, 0.45);
        .ITEM-left {
          color: rgba(0, 0, 0, 0.45);
          font-size: 14px;
        }

        .ITEM-right {
          font-size: 18px;
          font-weight: bold;
          color: #595959;
          max-width: 50px;
          // overflow: hidden;
          // text-overflow: ellipsis;
          // white-space: nowrap;
          img {
            width: 24px;
            height: 22px;
          }
          .unit {
            font-size: 14px;
            color: rgba(108, 108, 108, 1);
          }
        }
      }
    }
    .item-bigGreen {
      color: #00c460;
      font-size: 28px;
      margin-top: 10px;
    }
    .bridge-info-item-showBox {
      position: absolute;
      top: 0;
      left: 0;
      box-sizing: border-box;
      width: calc(100vw - 40px);
      overflow: hidden;
      z-index: 8;
      background: #ffffff;
      border-radius: 8px 8px 8px 8px;
      box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.08);
      .item-head {
        display: flex;
        justify-content: space-between;
        position: relative;
        background: rgba(22, 93, 255, 0.05);
        height: 36px;
        color: #262626;
        padding: 0 8px;
        align-items: center;
        border-bottom: 1px solid #e6e6e6;
        .head-title {
          font-size: 14px;
        }
        .head-icon {
          width: 12px;
          height: 12px;
          // position: absolute;
          // right: 8px;
          // top: 0;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .item-couplet {
        .item-couplet-ITEM {
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 44px;
          .ITEM-left {
            color: #595959;
            font-size: 14px;
            max-width: none;
          }

          .ITEM-right {
            color: #262626;
            font-size: 14px;
            max-width: none;
          }
        }
      }
    }
  }
}

.bridge-list-container {
  .bridge-list {
    overflow: hidden;
    width: 100%;
    margin-top: 16px;
    box-sizing: border-box;
    position: relative;
    // overflow: hidden;
    background: #ffffff;
    border-radius: 8px 8px 8px 8px;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.08);
    .item-head {
      display: flex;
      justify-content: space-between;
      position: relative;
      background: rgba(22, 93, 255, 0.05);
      height: 36px;
      color: #262626;
      padding: 0 8px;
      align-items: center;
      border-bottom: 1px solid #e6e6e6;
      .head-title {
        font-size: 14px;
      }
      .head-icon {
        width: 16px;
        height: 16px;
        // position: absolute;
        // right: 8px;
        // top: 0;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .head-more {
        display: flex;
        align-items: center;
        color: #abadb1;
        font-size: 12px;
        img {
          width: 4px;
          height: 6px;
          margin-left: 4px;
        }
      }
    }
    .item-hdtg-info {
      padding: 0 10px;
      .hdtg-info-ITEM {
        padding: 16px 0px;
        border-bottom: 1px solid #eeeeee;
        .ITEM-name {
          font-size: 14px;
          line-height: 20px;
          color: rgba(0, 0, 0, 0.85);
        }

        .ITEM-time {
          margin-top: 8px;
          font-size: 12px;
          color: #8c8c8c;
          // display: flex;
          justify-content: space-between;
          .time-right {
            // width: 170px;
          }
        }
      }
    }
  }
}
.margintop8 {
  margin-top: 8px !important;
}
.margintop16 {
  margin-top: 16px !important;
}
::-webkit-scrollbar {
  display: none;
}
.Empty {
  text-align: center;
  width: 100%;
  color: #8c8c8c;
  line-height: 120px;
}
.item-empty {
  width: 100%;
  text-align: center;
  color: #8c8c8c;
  margin-top: 30px;
}
</style>
